<template>
  <div class="gauge">
    <canvas ref="el" :width="computedCanvasWidth" :height="computedCanvasHeight"></canvas>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Gauge',
  props: {
    canvasWidth: {
      type: Number,
      default: 300
    },
    canvasHeight: {
      type: Number,
      default: 150
    },
    value: {
      type: Number,
      default: 0
    },
    text:  {
      type: String,
      default: ''
    }
  },
  computed: {
    computedCanvasWidth() {
      return this.$base * this.canvasWidth
    },
    computedCanvasHeight() {
      return this.$base * this.canvasHeight
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const option = {
        title: {
          text: this.text,
          left: 'center',
          bottom: '0%',
          textStyle: {
            fontSize: this.$base * 10,
            color: '#fff'
          }
        },
        series: [{
          type: 'gauge',
          radius: '80%',
          progress: {
            show: true,
            width: this.$base * 6,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#0444FE' // 0% 处的颜色
                }, {
                  offset: 1, color: '#00A5FF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          axisLine: {
            lineStyle: {
              width: this.$base * 6,
              color: [[1, '#262794']]
            },
            backgroundColor: '#00A5FF'  
          },
          axisTick: {
            show: false
          },
          pointer: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            fontSize: this.$base * 14,
            offsetCenter: [0, 0],
            formatter: function(a) {
              return a + '%'
            },
            color: '#01FAAA'
          },
          data: [{
            value: this.value
          }]
        }]
      }

      if (!this.instance) {
        this.instance = echarts.init(this.$refs.el)
      }
      this.instance.setOption(option)
    }
  }
}
</script>

<style lang="scss">
.gauge {
}
</style>
